<template>
  <view class="box">
    <view class="title">
      <view class="up">手机号登录</view>
      <view class="down">未注册的手机号登录后将自动注册</view>
    </view>
    <view class="form">
      <view class="form-item">
        <input type="text" v-model="formData.mobile" placeholder="请输入手机号码">
      </view>
      <view class="form-item">
        <input type="text" v-model="formData.pattern" placeholder="请输入图形验证码">
        <view class="pattern" @click="getPattern">
          <image :src="patternUrl"></image>
        </view>
      </view>
      <view class="form-item">
        <input type="text" v-model="formData.code" placeholder="请输入短信验证码">
        <view v-if="!showCountdown" class="code" @click="getCode">获取验证码</view>
        <view v-if="showCountdown" class="countdown">重新发送({{countdown}})秒</view>
      </view>
    </view>
    <button @click="submit">登 录</button>
  </view>
</template>

<script>
let patternTimer
export default {
  data(){
    return {
      formData:{
        mobile:'15216785173',
        pattern:'',
        code:''
      },
      patternUrl:'',
      key:'',
      showCountdown: false,
      countdown: 59,
      backTo:''
    }
  },
  onLoad(params){
    this.getPattern()
    if (params) {
      this.backTo = params.backTo
    }
  },
  methods:{
    validateMobile(){
      return new Promise((resolve,reject)=>{
        if(this.formData.mobile.trim()==='') {
          this.$toast('请输入手机号')
          return reject('请输入手机号')
        } else {
          const flag = /^1[3-9]\d{9}$/.test(this.formData.mobile)
          if (flag) {
            resolve('校验通过')
          } else {
            this.$toast('手机号格式不正确')
            return reject('手机号格式不正确')
          }
        }
      })
    },
    validatePattern(){
      return new Promise((resolve,reject)=>{
        if(this.formData.pattern.trim==='' || this.formData.pattern.length<4) {
          this.$toast('请输入4位图形验证码')
          return reject('请输入4位图形验证码')
        } else {
          resolve()
        }
      })
    },
    validateCode(){
      return new Promise((resolve,reject)=>{
        if(this.formData.code.trim()==='' || this.formData.code.length<6){
          this.$toast('请输入6位短信验证码')
          return reject('请输入6位短信验证码')
        }else {
          resolve()
        }
      })
    },
    getPattern(){
      clearTimeout(patternTimer)
      patternTimer = setTimeout(async () => {
        const {data} = await this.$http.get('/captcha/image')
        this.patternUrl = data.base64
        this.key = data.key         
      },1000)
    },
    async getCode(){
      try {
        await this.validateMobile()
        await this.validatePattern()
        this.showCountdown = true
        let timer = setInterval(()=>{
          this.countdown--
          if (this.countdown === 0) {
            this.showCountdown = false
            this.countdown = 59
            clearInterval(timer)
          }
        },1000)
        const res = await this.$http.post('/captcha/sendSmsCaptcha',{
          form:{
            captchaCode: this.formData.pattern,
            captchaKey: this.key,
            mobile: this.formData.mobile
          }
        })
        if(res.status !==200) return this.$toast('发送失败，请稍后重试')
        this.$toast(res.message)
      } catch (error) {
        console.log(error)
      }
    },
    async submit(){
     try {
      await this.validateMobile()
      await this.validateCode()
      const res = await this.$http.post('/passport/login',{
        form:{
          isParty: false,
          mobile: this.formData.mobile,
          partyData: {},
          smsCode: this.formData.code
        }
      })
      console.log(res)
       if (res.status === 500) {
        this.$toast('短信验证码不正确，请重新获取')
        this.formData.code =''
        return
       }
       if (res.status !== 200) {
        this.$toast('登录失败，请稍后重试')
        this.formData.code = ''
        return
       }
       this.$store.commit('user/setUserToken', res.data)
       this.$toast('登录成功！')
       if (this.backTo) {
         uni.redirectTo({
          url:this.backTo
         })
       } else {
         uni.redirectTo({
          url:'/pages/my/my'
        })
       }
     } catch (error) {
      console.log(error)
     }
    }
  }
}
</script>

<style lang="scss">
  image {
    width: 100%;
    height: 100%;
  }
  .box {
    box-sizing: border-box;
    padding: 100rpx 50rpx;
  }
  .title {
    font-size: 50rpx;
    .down {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #b8b3b3;
    }
  }
  .form {
    margin: 40rpx 0 60rpx;
    .form-item {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40rpx 20rpx;
      height: 120rpx;
      border-bottom: 1px solid #f5f3f4;
      font-size: 28rpx;
      color: #808080;
      .pattern {
        width: 180rpx;
        height: 60rpx;
      }
      .code {
        font-size: 26rpx;
        color: #cea26a;
      }
    }
  }
  button {
    width: 600rpx;
    height: 80rpx;
    border-radius: 50rpx;
    line-height: 80rpx;
    background: linear-gradient(to right,#edb43b,#ff9312) ;
    color: white;
    font-size: 28rpx;
  }
</style>